import React from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';

function Input(props) {
    const { form, field, onChangeText, ...rest } = props;
    // const onInputChangeText = (value) => {
    //     form.handleChange(field.name)(value);
    //     if (onChangeText) {
    //         onChangeText(value);
    //     }
    // };

    return (
        <View style={styles.container}>
            <TextInput
                style={styles.input}
                {...rest}
                onChangeText={form.handleChange(field.name)}
                onBlur={form.handleBlur(field.name)}
            />
            <View>
                <Text style={styles.error}>{form.errors[field.name]}</Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        marginVertical: 10,
    },
    input: {
        height: 40,
        paddingHorizontal: 10,
        borderColor: '#ccc',
        borderBottomWidth: StyleSheet.hairlineWidth,
    },
    error: {
        position: 'absolute',
        color: 'red',
        marginTop: 5,
        marginLeft: 10,
        fontSize: 12,
    },
});

export default Input;
